<template>
    <div class="box">
        <header class="header">
            <NavBar title="我的订单" />
        </header>
        <main class="content">
            <van-tabs v-model:active="active" @change="onChange">
                <van-tab title="全部"></van-tab>
                <van-tab title="待付款"></van-tab>
                <van-tab title="待发货"></van-tab>
                <van-tab title="已完成"></van-tab>
            </van-tabs>
            <van-empty v-if="list.length == 0"
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="暂无订单" />
            <div v-else v-for="item in list" :key="item.id" @click="$router.push('/myorder/detail/' + item.id)">
                <van-swipe-cell>
                    <div style="display:flex;justify-content: space-between;margin:10px;font-size:14px;">
                        <h4>订单号:{{ item.title }}</h4>
                        <div v-if="item.status == 1">订单状态:待付款</div>
                        <div v-if="item.status == 2">订单状态:待发货</div>
                    </div>
                    <van-card v-for="el in item.orderList" :key="el.id" :num="el.count" :price="el.price"
                        :title="el.title" :thumb="el.image">
                    </van-card>
                    <h5 style="text-align: right;margin:10px;">订单总金额:
                        <span style="color:red;">{{ item.price }}元</span>
                    </h5>
                </van-swipe-cell>
            </div>
        </main>
    </div>
</template>
<script setup>
import NavBar from '@/components/NavBar.vue';
import { useCounterStore } from '@/stores/counter'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const store = useCounterStore()
const active = ref(0)
const list = ref([])
const onChange = (index) => {
    if (index == 0) {
        list.value = store.myorderList
    } else {
        list.value = store.myorderList.filter(el => el.status == index) // index 为1时，对应status为未付款
    }
}
onMounted(() => {
    console.log(Number(route.query.status))
    active.value = Number(route.query.status)
    onChange(active.value)
})
</script>
